<template>
  <div class="sider-container h-screen flex justify-between flex-col">
    <div class="option-space h-full flex flex-col gap-2">
      <div class="newchat-box p-2 pb-0">
        <n-button class="w-full h-11 justify-start" ghost :focusable="false" @click="emit('openNewChat')">
          <template #icon>
            <n-icon :component="AddOutline" :size="18" color="#ffffff" />
          </template>
          <span class="text-[#ececf1]">新对话窗口</span>
        </n-button>
      </div>
      <n-spin class="chat-block px-2 overflow-auto" :show="props.listLoading" description="加载中">
        <n-button quaternary :focusable="false" v-for="item in props.msgList" :key="item.conversationId"
          @click="emit('changeChat', item)" :class="['my-1', { 'bg-dark': $route.params.id === item.conversationId }]">
          <template #icon>
            <n-icon :component="ChatboxOutline" :size="18" />
          </template>
          <div class="w-full flex items-center justify-between">
            <n-ellipsis style="max-width: 100%">
              {{ item.title }}
            </n-ellipsis>
            <n-icon :component="TrashOutline" :size="16" title="删除对话" @click.stop="emit('delChat', item.conversationId)"
              :class="[{ 'visible': $route.params.id === item.conversationId }]" />
          </div>
        </n-button>
      </n-spin>
    </div>
    <n-space class="option-space m-2 pt-1" vertical>
      <n-button quaternary :focusable="false" @click="emit('openWechatOfficial')">
        <template #icon>
          <n-icon :component="LogoWechat" />
        </template>
        微信公众号
      </n-button>
      <n-button v-if="mainStore.theme === 'light'" quaternary :focusable="false" @click="mainStore.setTheme('dark')">
        <template #icon>
          <n-icon :component="MoonOutline" />
        </template>
        切换深色
      </n-button>
      <n-button v-else quaternary :focusable="false" @click="mainStore.setTheme('light')">
        <template #icon>
          <n-icon :component="SunnyOutline" />
        </template>
        切换浅色
      </n-button>
      <n-button quaternary :focusable="false" v-if="!userStore.isLogin" @click="emit('openLogin')">
        <template #icon>
          <n-icon :component="EnterOutline" />
        </template>
        立即登录
      </n-button>
      <n-button quaternary :focusable="false" @click="userStore.logout()" v-else>
        <template #icon>
          <n-icon :component="LogOutOutline" />
        </template>
        退出登录
      </n-button>
    </n-space>
  </div>
</template>

<script setup>
import { TrashOutline, AddOutline, ChatboxOutline, LogOutOutline, EnterOutline, SunnyOutline, MoonOutline, LogoWechat } from '@vicons/ionicons5'
import { useUserStore, useMainStore } from '@/store'

const mainStore = useMainStore()
const userStore = useUserStore()

const emit = defineEmits(['openNewChat', 'delChat', 'changeChat', 'openLogin', 'openWechatOfficial'])

const props = defineProps({
  listLoading: {
    type: Boolean
  },
  msgList: {
    type: Array
  }
})
</script>

<style lang="less" scoped>
.sider-container {
  &:deep(.newchat-box) {
    .n-button--ghost {

      .n-button__state-border,
      .n-button__border {
        border-color: #55575e;
      }
    }

    .n-button:not(.n-button--disabled):hover {
      background-color: #2B2C2F;
    }
  }

  &:deep(.option-space) {
    border-top: 1px solid #55575e;
    .chat-block {
      height: calc(100vh - 244px);
      overflow: auto;
      .n-spin-content {
        height: 100%;
        .n-button {
          &:hover {
            .n-button__content .n-icon {
              visibility: visible;
            }
          }

          .n-button__content {
            width: 100%;

            .n-icon {
              visibility: hidden;
            }
          }
        }
      }
    }

    .n-button {
      width: 100%;
      height: 44px;
      color: #ececf1;
      justify-content: flex-start;

      .n-button__icon {
        font-size: 22px;
        margin-right: 15px;
        margin-top: 3px;
      }
    }

    .n-button:not(.n-button--disabled):hover {
      background-color: #2A2B32;
    }
  }
}
</style>